<template>
    <div>
        <h3>日志管理</h3>
        <hr />
        <div>
            <el-form
                :inline="true"
                :model="formInline"
                clearable
                class="demo-form-inline"
            >
                <el-form-item label="用户账户：">
                    <el-input
                        v-model="formInline.user"
                        placeholder="请输入内容"
                        clearable
                        @blur="seekLogsUser(formInline.user)"
                    ></el-input>
                </el-form-item>
                <el-form-item label="执行结果：">
                    <el-select
                        v-model="formInline.region"
                        @change="seekLogsResult(formInline.region)"
                    >
                        <el-option label="成功" value="成功"></el-option>
                        <el-option label="失败" value="失败"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <el-form
                :inline="true"
                :model="formInline"
                clearable
                class="demo-form-inline"
            >
                <el-form-item label="执行操作：">
                    <el-select
                        v-model="formInline.handle"
                        @change="seekLogsHandle(formInline.handle)"
                    >
                        <el-option label="管理员" value="管理员"></el-option>
                        <el-option label="出租方" value="出租方"></el-option>
                        <el-option label="用户" value="用户"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="执行时间：">
                    <el-date-picker
                        v-model="value"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions"
                    >
                    </el-date-picker
                ></el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="seekLogsTime(value)"
                        >查询</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <!-- 表格 -->
        <div id="table">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column label="日志编号" width="80" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="IP地址"
                    width="100"
                    align="center"
                    prop="IPaddress"
                >
                </el-table-column>
                <el-table-column label="操作用户" width="180" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.username }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作时间"
                    width="240"
                    align="center"
                    prop="handleTime"
                >
                </el-table-column>
                <el-table-column
                    label="执行操作"
                    width="100"
                    align="center"
                    prop="handleType"
                >
                </el-table-column>
                <el-table-column label="操作类型" width="180" align="center">
                    <template slot-scope="scope">
                        <i class="el-icon-user-solid"></i>
                        <span>登录</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="执行结果"
                    width="100"
                    align="center"
                    prop="result"
                >
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="danger"
                            @click="deleteLogs(scope.row._id)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 换页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            class="page"
        >
        </el-pagination>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const {
    mapActions: mapActions,
    mapMutations: mapMutations,
    mapState: mapState,
} = createNamespacedHelpers("logs");
export default {
    data() {
        return {
            formInline: {
                user: "",
                region: "",
                handle: "",
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        },
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", date);
                        },
                    },
                    {
                        text: "一周前",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", date);
                        },
                    },
                ],
            },
            value: "",
        };
    },
    // 挂载时加载数据
    mounted() {
        this.getLogs();
    },
    // 侦听
    watch: {
        currentPage() {
            //当前页码的变化，然后调用渲染
            if (this.num == 1) {
                this.getLogs();
            } else if (this.num == 2) {
                this.seekLogsUser(this.formInline.user);
            } else if (this.num == 3) {
                this.seekLogsResult(this.formInline.region);
            } else if (this.num == 4) {
                this.seekLogsHandle(this.formInline.handle);
            } else if (this.num == 5) {
                this.seekLogsTime(this.value);
            }
        },
        pageSize() {
            //当前显示条数的变化，来渲染
            if (this.num == 1) {
                this.getLogs();
            } else if (this.num == 2) {
                this.seekLogsUser(this.formInline.user);
            } else if (this.num == 3) {
                this.seekLogsResult(this.formInline.region);
            } else if (this.num == 4) {
                this.seekLogsHandle(this.formInline.handle);
            } else if (this.num == 5) {
                this.seekLogsTime(this.value);
            }
        },
    },
    computed: {
        ...mapState([
            "tableData",
            "currentPage",
            "total",
            "pages",
            "pageSize",
            "num",
        ]),
    },
    methods: {
        handleSizeChange(val) {
            this.changePageSize(val);
        },
        handleCurrentChange(val) {
            this.changeCurrentPage(val);
        },
        ...mapMutations(["changePageSize", "changeCurrentPage"]),
        ...mapActions([
            "getLogs",
            "deleteLogs",
            "seekLogsUser",
            "seekLogsResult",
            "seekLogsHandle",
            "seekLogsTime",
        ]),
    },
};
</script>
<style>
#table {
    margin-top: 10px;
}
.demo-form-inline {
    margin-top: 10px;
}
.page {
    margin-top: 10px;
}
</style>